<template>
  <div class="mycomment">
    <div class="tit">
      我的评价
      <span>私の評価</span>
    </div>
    <div class="mui-card">
				<div class="mui-card-header mui-card-media">
					<img src="../assets/images/product.png">
					<div class="mui-media-body">
						<div class="gq">
              <p></p>
            </div>
						<p>HITACHICM-N400美容仪</p>
					</div>
				</div>
				<div class="mui-card-content">
					<p>还不错，一直在使用这个牌子的眼药水</p>
				</div>
				<div class="mui-card-footer">
					
          <span>删除</span>
				</div>
			</div>
  </div>
</template>

<script>
export default {

  data () {
    return {
    }
  },

  methods: {},

  created () {
  }
}
</script>

<style lang='less'>
.mui-card{
  margin: 18px 0;
  box-shadow:none;
  border-radius:10px;
  border: 1px solid #e7e7e7;
  .mui-card-header{
    overflow: hidden;
    img{
      width:70px;
      height:70px;
      margin: 10px;
      border-radius:10px;
    }
    .mui-media-body{
      margin-left: 90px;
      p{
        font-size: 14px;
        color: #333333;
      }
      .gq{
        width:14px;
        height:10px;
        border: 1px solid #F2F2F2;
        margin: 16px 0 5px 0;
        p{
          width:4px;
          height:4px;
          margin: 2.5px 4px;
          background: red;
          border-radius:2px;
        }
      }
    }
  }
  .mui-card-content{
    padding:20px 20px 10px 20px;
    p{
      font-size: 12px;
      color: #666666;
    }
    
  }
  .mui-card-footer{
    overflow: hidden;
    position: relative;
    span{
      display: block;
      position: absolute;
      right: 13px;
      padding-left:22px; 
      &::before{
        content: "";
        display: block;
        position: absolute;
        left:0;
        width:19px;
        height:18px;
        top:1px;
        background: url(../assets/images/icon5.png) no-repeat;
        background-size:19px 18px;
      }
    }
    
  }
}
</style>
